<template>
  <div class="nav">
    <!--网站logo-->
    <logo class="nav-logo"/>
    <el-menu
        :default-active="acticeIndex"
        class="el-menu-demo nav-menu"
        mode="horizontal"
        :ellipsis="false"
    >
      <el-menu-item index="1" @click="router().push({name:'list'});">
        首页
      </el-menu-item>
      <el-menu-item index="2" @click="router().push({name:'share'})">
        动态
      </el-menu-item>
      <el-menu-item index="3" @click="router().push({name:'milestone'})">
        时间线
      </el-menu-item>
    </el-menu>
    <ul class="right-ul">
      <li v-if="!islogin">
        <el-button @click="router().push({name:'login'})">登录</el-button>
      </li>
      <li v-if="islogin">
        <ul class="func-ul">
          <!--搜索框-->
          <li>
            <el-input>
              <template #append>
                <el-button :icon="Search()"/>
              </template>
            </el-input>
          </li>
          <!--消息通知-->
          <li>
            <Bell style="width: 2em; height: 2em;"/>
          </li>
          <!--用户头像-->
          <li>
            <el-dropdown trigger="click">
              <el-avatar :size="35"
                         src="https://p3-passport.byteimg.com/img/user-avatar/55c89a68638551fe1f34b85ef15f6e6b~100x100.awebp"/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="router().push({name:'user',params:{id:101}})">个人主页</el-dropdown-item>
                  <el-dropdown-item @click="router().push({name:'editor'})">文章创作</el-dropdown-item>
                  <el-dropdown-item>用户设置</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import Logo from "@/components/common/Logo.vue";
import {Female, Search} from "@element-plus/icons-vue";
import {AuthStore} from "@/store/AuthStore";
import {reactive} from "vue";
import router from "@/router";

export default {
  name: "IndexNavBar",
  components: {Logo},
  methods: {
    router() {
      return router;
    },
    Female() {
      return Female;
    },
    Search() {
      return Search;
    }
  },
  setup() {
    const state = reactive({
      islogin: false,
      acticeIndex: '1',
    });
    const authStore = AuthStore();
    state.islogin = authStore.isLogin();
    return {
      ...state
    };
  },

};
</script>

<style scoped>
@media screen and (max-width: 1100px) {
  .nav {
    margin: 0 !important;
    justify-content: center !important;
  }

  .nav-logo {
    display: none;
  }

  .right-ul * {
    display: none;
  }
}

.nav {
  margin: 0 100px 0 250px;
  display: flex;
  justify-content: space-between;
}

.nav-menu {
  user-select: none;
}

:deep(.el-menu--horizontal) {
  border: none;
}

.right-ul {
  display: flex;
  align-items: center;
}

.right-ul li {
  margin: 0 15px;
}

.func-ul {
  display: flex;
  align-items: center;
}

.func-ul li {
  margin: 0 15px;
}
</style>